<template>
    <div :class="$style.container">
        <div :class="$style.category">
            <Dept @change="onChangeCategory" />
        </div>
        <div :class="$style.table">
            <div style="padding-left: 15px;font-size: 18px;font-weight: bold">{{ currentCategory ? currentCategory.name : '全部部门' }}</div>
            <BPTable ref='tableRef' align='center' row-key='id' :columns='columns' :api='pageFn' :buttons='buttons'>
                <template #$button>
                    <a-button type='primary' ghost :loading='pullIng' @click='pull'>拉取</a-button>
                </template>

                <template #gh="{record}">
                    <SecrecyField :record="record" field-name="gh" :api="e => secrecySeeApi(record.id, 'gh', e)" />
                </template>

                <template #name="{record}">
                    <SecrecyField :record="record" field-name="name" :api="e => secrecySeeApi(record.id, 'name', e)" />
                </template>

                <template #tel="{record}">
                    <SecrecyField v-if="record.tel" :record="record" field-name="tel" :api="e => secrecySeeApi(record.id, 'tel', e)" />
                </template>

            </BPTable>
        </div>
    </div>

    <BDrawer v-model:visible='visible' :title='dialogTitle' width='600px' :confirm='submit'>
        <Edit :row="currentRow" ref="formRef" />
    </BDrawer>
</template>

<script lang='ts' setup>
    import { ref } from "vue";
    import { deleteApi, pageApi, pullApi, secrecySeeApi } from '@/api/Teacher'
    import { deptApi } from '@/api/SchoolDept';
    import { parseTime, recursionFn } from "@/utils";
    import { useResourceStore } from "@/store/resource";
    import Edit from './Edit.vue';
import { Modal, message } from "ant-design-vue";
import { useI18nStore } from "@/store/i18n";
import Dept from '../dept/Dept.vue'
import SecrecyField from '@/components/SecrecyField.vue'
import { SEX_OPTIONS } from "@/constant";

    const i18n = useI18nStore()
    const resourceStore = useResourceStore()

    const visible = ref(false)
    const formRef = ref()
    const dialogTitle = ref()
    const currentRow = ref<any>()

    const tableRef = ref()

    const currentCategory = ref()
    function onChangeCategory(e) {
        currentCategory.value = e.code
        tableRef.value.load()
    }

    function pageFn(params:any) {
        if(currentCategory.value) {
            params.deptCode = currentCategory.value
        }

        return pageApi(params)
    }

    const pullIng = ref(false)
    async function pull() {
        pullIng.value = true
        await pullApi()
        setTimeout(() => {
            pullIng.value = false
            tableRef.value.load()
        }, 5000)
    }


    const buttons = ref<SearchButton[]>([])

    if(resourceStore.hasPermission("user:teacher:add")) {
        buttons.value.push({
            button : 'add',
            func : () => {
                currentRow.value = null
                dialogTitle.value = '新增'
                visible.value = true
            }
        })
    }


    const columns = ref<Column[]>([
        {
            dataIndex : 'gh',
            title : '工号',
            inSearch : true,
        },

        {
            dataIndex : 'name',
            title : '姓名',
            inSearch : true,
        },

        {
            dataIndex : 'sex',
            title : '性别',
            customRender({record}) {
                return SEX_OPTIONS[record.sex]
            }
        },

        {
            dataIndex : 'tel',
            title : '电话',
        },
        

        {
            dataIndex : 'deptName',
            title : '部门',
            // inSearch : true,
            // type : 'treeSelect',
            // valueField : 'code',
            // labelField : 'name',
            // name : 'deptCode',
            // options : async () => {
            //     const r = await deptApi()
            //     return recursionFn(r.data, 0, 'id', 'parentId', 'children')
            // }
        },

        {
            dataIndex : 'jobPost',
            title : '岗位',
        },
        
        {
            dataIndex : 'position',
            title : '职位',
        },


        
        // {
        //     title : '最近登录',
        //     dataIndex : 'lastLoginTime',
        //     align : 'center',
        //     customRender({text}) {
        //         return parseTime(text)
        //     }
        // },

        {
            title : i18n.t('operation'),
            dataIndex : '$action',
            align : 'center',
            $edit : resourceStore.hasPermission('user:teacher:update') ? (row) => {
                dialogTitle.value = i18n.t('edit')
                currentRow.value = row
                visible.value = true
            } : undefined,

            $delete : resourceStore.hasPermission('user:teacher:delete') ? async (row) => {
                const res = await deleteApi(row.id)
                if(res.success) {
                    message.success(i18n.t('deleteSuccess'))
                    tableRef.value.load()
                }else {
                    message.error(res.msg)
                }
            } : undefined
        }
    ])

    const dataRows = ref<any[]>([])

    async function submit() {
        const res = await formRef.value.submit()
        if(res.success) {
            tableRef.value.reload()
            visible.value = false
            message.success('保存成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }
    
</script>


<style lang="scss" module>
    .container{
        display: flex;
        .category{
            width: 250px;
            border-right: 1px solid $borderColor;
        }
        .table{
            flex: 1;
        }
    }
</style>